<template>
  <n-card class="company" hoverable size="huge">
    <!-- 企业LOGO -->
    <div class="company-logo">
      <n-image
        width="60"
        height="60"
        object-fit="fill"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F99592352c0e089bfe8896d813575acf515a8b7e0.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655048476&t=339af5844979d4669af59bb8b948d823"
      />
    </div>

    <!-- 企业简要关键字 -->
    <div class="company-info">
      <p class="company-name">华为技术有限公司</p>
      <ul class="key-words">
        <li class="key-words-item">
          <n-icon>
            <svg-icon name="briefcase" color="#A9A9A9"></svg-icon>
          </n-icon>
          <b class="words">前端</b>
        </li>
        <li class="key-words-item">
          <n-icon>
            <svg-icon name="coordinate" color="#A9A9A9"></svg-icon>
          </n-icon>
          <b class="words">北京</b>
        </li>
        <li class="key-words-item">
          <n-icon>
            <svg-icon name="money" color="#A9A9A9"></svg-icon>
          </n-icon>
          <b class="words">1500-2000/月</b>
        </li>
      </ul>
      <div class="key-tag">
        <n-tag class="key-tag-item" type="warning" size="small" round>
          本科
        </n-tag>
        <n-tag class="key-tag-item" type="info" size="small" round>
          餐补
        </n-tag>
        <n-tag class="key-tag-item" type="success" size="small" round>
          五险一金
        </n-tag>
      </div>
    </div>

    <!-- 收藏该企业 -->
    <n-icon class="company-collect">
      <svg-icon name="collect" color="#A9A9A9"></svg-icon>
    </n-icon>
  </n-card>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  computed: {},
  mounted() {},
}
</script>

<style lang="scss">
.company {
  width: 49%;
  margin: 20px 0px;
  border-radius: 10px;

  // border: 1px solid #ECEDF2;
  .n-card__content {
    display: flex;

    .company-logo {
      padding-right: 20px;
    }

    .company-info {
      flex-grow: 3;

      .company-name {
        font-size: 18px;
        font-weight: bold;
      }

      .key-words {
        display: flex;
        justify-content: space-between;
        padding-top: 5px;
        color: "#A9A9A9";

        .key-words-item {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .words {
            padding-left: 10px;
          }
        }
      }

      .key-tag {
        padding-top: 20px;

        .key-tag-item {
          margin-right: 20px;
        }
      }
    }

    .company-collect {
      flex-grow: 2;
      font-size: 20px;
    }
  }
}
</style>